<template>
	<view>
		<view class="main_con u-padding-20">
			<view class="u-flex u-row-between u-border-bottom">
				<text style="font-size: 32rpx;font-weight: bold;color:#333;">采购物品信息</text>
				<text style="font-size: 26rpx;color: orange;">填写中</text>
			</view>
			<view class="u-flex u-row-between">
				<text>采购名称</text>
				<input v-model="name" type="text" placeholder="请输入采购物品名称">
			</view>
			<view>
				<u-upload width="150rpx" height="150rpx" :action="action" @on-success="successimg" @on-remove="deletePic" maxCount="1"></u-upload>
			</view>
			<view class="u-flex u-row-between u-border-bottom">
				<text>采购分类</text>
				<view @click="show=true">
					<text style="margin-right:20rpx;">{{typename}}</text>
					<u-icon name="arrow-down" color="#333" size="28"></u-icon>
				</view>
			</view>
			<view class="u-flex u-row-between u-border-bottom">
				<text>数量</text>
				<input v-model="num" type="number" placeholder="请输入采购物品数量">
			</view>
			<view class="u-flex u-row-between u-border-bottom">
				<text>物品单价</text>
				<view>
					<input v-model="unit" style="display: inline-block;width:87%;vertical-align: middle;" type="number" placeholder="请输入物品单价">
					<text class="va_m" style="margin-left:10rpx;">元</text>
				</view>
				
			</view>
			<view class="u-flex u-row-between u-border-bottom">
				<text>物品总价</text>
				<view>
					<input disabled style="display: inline-block;width:87%;vertical-align: middle;" type="number" :value="num * unit" placeholder="物品总价">
					<text class="va_m" style="margin-left:10rpx;">元</text>
				</view>
			</view>
			<view class="u-flex u-row-between u-border-bottom">
				<text>采购日期</text>
				<input v-model="showtime" type="data" disabled="" placeholder="请选择采购日期" @click="showcalendar=true">
			</view>
			<view>
				<text>物品用途简述</text>
				<textarea v-model="label" placeholder="请简述用途等等"></textarea>
			</view>
			<button class="l_btn" shape="circle" @click="submit">提交</button>
		</view>
		<!-- 弹框提示 -->
		<u-toast ref="uToast" />
		<u-select v-model="show" :list="list" @confirm="confirm"></u-select>
		<u-picker mode="time" v-model="showcalendar" :params="params" @confirm="confirmtime"></u-picker>
		
	</view>
</template>

<script>
	import {
		purchase,getAssetsType
	} from "@/service/assetService.js";
	export default {
		data () {
			return {
				action:'https://admin.gslhzhwy.com/api/upload/file',
				images:[],
				show:false,
				typeid:1,
				typename:'请选择',
				list: [],
				showcalendar:false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				showtime:'',
				name:'',
				num:0,
				price:0,
				unit:0,
				label:''
			}
		},
		onLoad(){
			getAssetsType().then(this.getAssetsType)
		},
		methods:{
			getAssetsType(e){
				if(e.code==200){
					let list = e.result;
					list.forEach((item) => {
						let obj={
							label:item.name,
							value:item.id
						}
						this.list.push(obj);
					})
				}
			},
			successimg:function(e){
				if (e.code == 1) {
					this.images=e.data.url;
				}
			},
			// 删除图片
			deletePic(event) {
				this.images=''
			},
			confirmtime(e){
				// console.log(e)
				this.showtime=e.year+'-'+e.month+'-'+e.day+' '+e.hour+':'+e.minute+':'+e.second
			},
			confirm(e) {
				// console.log(e);
				this.typename=e[0].label;
				this.typeid=e[0].value;			
			},
			
			submit(){
				purchase({
					nid:this.typeid,
					name:this.name,
					num:this.num,
					price:this.num*this.unit,
					unit:this.unit,
					label:this.label,
					time:this.showtime,
					image:this.images
				}).then(res=>{
					if(res.code==200){
						this.$refs.uToast.show({
							type: 'success',
							title: '提交成功',
							icon:false
						})
						setTimeout(function(){
							uni.navigateBack()
						},2000)
					}else{
						this.$refs.uToast.show({
							type: 'error',
							title: res.msg,
							icon:false
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f2f2f2;
	}
	.main_con{
		margin-top:10rpx;
		background-color: #fff;
	}
	.main_con>view{
		padding:20rpx 0;
		text{
			color:#5c5c5c
		}
		textarea{
			width:100%;
			height:100rpx;
			margin-top:10rpx;
			font-size: 28rpx;
		}
		input{
			text-align: right;
			font-size: 28rpx;
			border:none;
		}
	}
	.l_btn{
		position: fixed;
		bottom:50rpx;
		margin-left:5%;
		width:90%;
		height:70rpx !important;
		padding:0;
		line-height: 70rpx;
		border-radius: 35rpx;
		font-size: 30rpx;
		color:#fff;
		background-image: url('https://resourse.cnlhjt.com/upload/20220825/d1aa35c1d129137d9b12c8f34e59c5bc.png');
		background-size: 100% 70rpx;
		border:none !important;
	}
</style>